<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">按钮</button>
</body>
<script>
  const btn = document.querySelector("#btn")
  const person = {
    name: "lily",
    age: 18,
    sex: "男",
  };

  function reactive(target) {
    if (typeof target !== 'object') return target

    return new Proxy(target, {
      get(target, property) {
        console.log("收集依赖");
        const value = target[property]
        return reactive(value)
      },
      set(target, property, value) {
        console.log("通知依赖更新");
        Reflect.set(target, property, value)
      },
      deleteProperty(target, property) {
        console.log("通知依赖更新");
        Reflect.defineProperty(target, property)
      }
    })
  }
  const proxyPerson = reactive(person);
  console.log(proxyPerson);
</script>

</html>